<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Errors | a11y.css</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
          content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
    <link rel="stylesheet" href="./static/docs.css?v=1690620346337">
    <link rel="shortcut icon" href="https://ffoodd.github.io/a11y.css/static/favicon.ico">
    <link rel="preload" href="./static/fonts/firasans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="./static/css/a11y-en_errors-only.css"><link rel="stylesheet" href="./static/css/a11y-light.min.css">
</head>
  <body>
    <div class="sr-only-focusable" id="skip-links">
      <a href="#toc">Skip to table of content</a>
      <a href="#content">Skip to content</a>
    </div>
    <header role="banner" id="top" tabindex="-1">
  <a href="." id="logo">
    <svg xmlns="http://www.w3.org/2000/svg" width="90" height="89.905" viewBox="0 0 180 179.81" role="img" aria-labelledby="titre">
      <title id="titre">a11y.css</title>
      <path fill="#ffce00" d="M0 8a8 8 0 0 1 8-8h164a8 8 0 0 1 8 8v163.81a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8z"/>
      <path fill="currentColor" d="M80.83 36.9a10 10 0 0 1 5.06-7.18 7.43 7.43 0 0 1 8.53 1.53 8.76 8.76 0 0 1 2.91 6.18c0 4.71.09 64.9 0 68.32a10.42 10.42 0 0 1-1.77 5.83 8 8 0 0 1-8 3.23c-4-.86-6.63-4.74-6.75-8.71s-.01-69.07.02-69.2zM27 120.87c6-4.4 11.77-9.09 17.83-13.4-4-3.22-7.94-6.52-12.17-9.39-3.62-2.46-8.14-5.36-7-10.42a5.86 5.86 0 0 1 3.8-4.43 7.07 7.07 0 0 1 6.19 1.41c2.23 1.7 22.88 17.71 24.22 19.61a5.75 5.75 0 0 1 .63 5.93 13.16 13.16 0 0 1-5 4.79c-4.37 2.7-17.18 12.84-19.54 14.66a8.32 8.32 0 0 1-6.87 1.74 5.47 5.47 0 0 1-4-5 7.62 7.62 0 0 1 .57-3.52 5.84 5.84 0 0 1 1.34-1.98zm126.43.81c2.18 3.27 1.27 7.87-2.57 9.37-4.27 1.67-8-2.09-11.07-4.4-3.81-2.83-7.55-5.73-11.35-8.57-1.72-1.29-3.48-2.48-5.25-3.71a12.08 12.08 0 0 1-4.18-4.35 5.81 5.81 0 0 1 .42-5.41c1-1.69 23.77-19.87 25.64-20.75a6.78 6.78 0 0 1 5.5-.45 6 6 0 0 1 3.43 4.08c1.29 5.07-3.31 8.09-6.93 10.53-2.08 1.41-10.21 7.81-12.27 9.48 3.42 2.33 16.62 12.48 17.46 13.11a10 10 0 0 0 1.21 1.06zM100 141.25a11 11 0 1 1-11-11 11 11 0 0 1 11 11z"/>
    </svg>
  </a><nav role="navigation" aria-label="Main navigation" class="nav">
  <ul class="list-unstyled">
      <li>
        <a href="./errors.html" class="errors" aria-current="page">Errors
        </a>
      </li>
      <li>
        <a href="./warnings.html" class="warnings">Warnings
        </a>
      </li>
      <li>
        <a href="./obsoletes.html" class="obsolete">Obsoletes
        </a>
      </li>
      <li>
        <a href="./advices.html" class="advices">Advices
        </a>
      </li>
      <li>
        <a href="./webextension.html" class="webextension">WebExtension
        </a>
      </li>
      <li>
        <a href="./docs.html" class="sassdoc"><b><abbr title="Application Programming Interface">API</abbr></b> Doc
        </a>
      </li>
      <li>
        <a href="https://github.com/ffoodd/a11y.css">On <b>Github</b><span class="sr-only">&nbsp;(external link)</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>
        </a>
      </li>
  </ul>
</nav>
</header>


    <aside role="complementary">
      
<nav role="navigation" aria-labelledby="toc-title" id="toc">
  <p class="box-title" id="toc-title">Table of content</p>
  
    <ol>
        <li>
          <a href="#attribute-whitespace">Attribute should not contain whitespace</a>
        </li>
        <li>
          <a href="#tab-order">[tabindex] &gt; 0</a>
        </li>
        <li>
          <a href="#empty-href">Empty [href]</a>
        </li>
        <li>
          <a href="#empty-link">Empty link</a>
        </li>
        <li>
          <a href="#no-alt">Missing alternative for img</a>
        </li>
        <li>
          <a href="#no-aria-label">Missing label for [role=img]</a>
        </li>
        <li>
          <a href="#no-src">Missing source for img</a>
        </li>
        <li>
          <a href="#empty-for">A label with an empty [for] attribute</a>
        </li>
        <li>
          <a href="#no-id">Missing some kind of label</a>
        </li>
        <li>
          <a href="#no-value">Missing a value</a>
        </li>
        <li>
          <a href="#empty-button">Empty button</a>
        </li>
        <li>
          <a href="#empty-button-attr">Empty button attribute</a>
        </li>
        <li>
          <a href="#not-form-button">Form button</a>
        </li>
        <li>
          <a href="#not-submit-button">Button not submitting</a>
        </li>
        <li>
          <a href="#disabled-button">Disabled button</a>
        </li>
        <li>
          <a href="#no-type">input without [type]</a>
        </li>
        <li>
          <a href="#optgroup">optgroup without label</a>
        </li>
        <li>
          <a href="#no-title">iframe without [title]</a>
        </li>
        <li>
          <a href="#no-action">form missing an [action]</a>
        </li>
        <li>
          <a href="#no-lang">No valid language defined</a>
        </li>
        <li>
          <a href="#table-for-layout">table used for layout</a>
        </li>
        <li>
          <a href="#dimensions">[width] &amp; [height] attributes</a>
        </li>
        <li>
          <a href="#js-events">Javascript events attributes</a>
        </li>
        <li>
          <a href="#namespace">Namespaces</a>
        </li>
        <li>
          <a href="#no-page-title">Empty title tag</a>
        </li>
        <li>
          <a href="#unaccessible-viewport">Unaccessible viewport attribute</a>
        </li>
        <li>
          <a href="#incorrect-charset">Incorrect charset</a>
        </li>
        <li>
          <a href="#late-charset">Charset should come first</a>
        </li>
        <li>
          <a href="#invalid-dir">Invalid [dir] attribute</a>
        </li>
        <li>
          <a href="#accesskey">[accesskey] is a bad idea</a>
        </li>
        <li>
          <a href="#inputs-group">Grouping inputs</a>
        </li>
        <li>
          <a href="#radio-group">[radio] outside a fieldset</a>
        </li>
        <li>
          <a href="#role-slider">[role=slider] missing attributes</a>
        </li>
        <li>
          <a href="#role-spinbutton">[role=spinbutton] missing attributes</a>
        </li>
        <li>
          <a href="#role-checkbox">[role=checkbox] missing state</a>
        </li>
        <li>
          <a href="#role-combobox">[role=combobox] missing [state]</a>
        </li>
        <li>
          <a href="#role-scrollbar">[role=scrollbar] required properties</a>
        </li>
        <li>
          <a href="#nested-interactive">Nested interactive elements</a>
        </li>
    </ol>
</nav>


      <div class="box hidden-sm">
        <p class="box-title">Web extensions</p>
        <ul class="list-unstyled">
          <li>
            <a href="https://addons.mozilla.org/en-GB/firefox/addon/a11ycss/" title="a11y.css Firefox add-on">
              <img src="./static/firefox.svg" width="112" height="42" alt="a11y.css Firefox add-on"/>
            </a>
          </li>
          <li>
            <a href="https://microsoftedge.microsoft.com/addons/detail/a11ycss/lkehmahcnhddkdaemngepjckgcjnidpe" title="a11y.css Edge add-on">
              <img src="./static/edge.svg" width="112" height="42" alt="a11y.css Edge add-on"/>
            </a>
          </li>
          <li>
            <a href="https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=fr" title="a11y.css Chrome extension">
              <img src="./static/chrome.svg" width="119" height="42" alt="a11y.css Chrome extension"/>
            </a>
          </li>
        </ul>
      </div>
    </aside>

    <main role="main" id="content" tabindex="-1">
      
  <h1>Errors</h1>
  
        <article>
          <h2 id="attribute-whitespace">Attribute should not contain whitespace</h2>
          <h3>Description</h3>
<p>Some HTML attributes should not contain any whitespace —namely <code>[id]</code>, <code>[lang]</code> and <code>map[name]</code>.</p>
<h3>Reference</h3>
<ul>
<li><a href="https://html.spec.whatwg.org/#the-id-attribute">https://html.spec.whatwg.org/#the-id-attribute</a></li>
<li><a href="https://html.spec.whatwg.org/#the-map-element">https://html.spec.whatwg.org/#the-map-element</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[id*=<span class="token string">" "</span>]<span class="token punctuation">,</span>
[lang*=<span class="token string">" "</span>]<span class="token punctuation">,</span>
map[name*=<span class="token string">" "</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><p id="my id">This is my beautiful element with an ID</p>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is my beautiful element with an ID<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="tab-order">[tabindex] &gt; 0</h2>
          <h3>Description</h3>
<p>The <code>[tabindex]</code> attribute should never be greater than 0.</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L337">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L337</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F44">https://www.w3.org/WAI/WCAG21/Techniques/failures/F44</a></li>
<li><a href="https://www.scottohara.me/blog/2019/05/25/tabindex.html">https://www.scottohara.me/blog/2019/05/25/tabindex.html</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[tabindex]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[tabindex=<span class="token string">"0"</span>]<span class="token punctuation">,</span> [tabindex^=<span class="token string">"-"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><button tabindex="1" type="button">Positive tabindex is bad</button>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Positive tabindex is bad<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-href">Empty [href]</h2>
          <h3>Description</h3>
<p>The <code>[href]</code> attribute, if present, should not be empty. A link <em>to</em> something, right?</p>
<h3>References</h3>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/links.html#links-created-by-a-and-area-elements">https://html.spec.whatwg.org/multipage/links.html#links-created-by-a-and-area-elements</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L161">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L161</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L165</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">a[href=<span class="token string">""</span>]<span class="token punctuation">,</span>
a[href=<span class="token string">" "</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href=" ">Who am I? Where do I link?</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> <span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Who am I? Where do I link?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-link">Empty link</h2>
          <h3>Description</h3>
<p>An empty link should have a label, within <code>[title]</code>, <code>[aria-label]</code> or targeted by <code>[aria-labelledby]</code>.
By the way, why would you use an empty link?</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#6.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#6.2</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#non-text-content">https://www.w3.org/TR/WCAG21/#non-text-content</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#link-purpose-in-context">https://www.w3.org/TR/WCAG21/#link-purpose-in-context</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#link-purpose-link-only">https://www.w3.org/TR/WCAG21/#link-purpose-link-only</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H30">https://www.w3.org/WAI/WCAG21/Techniques/html/H30</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G91">https://www.w3.org/WAI/WCAG21/Techniques/general/G91</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">a</span><span class="token punctuation">:</span>empty[title=<span class="token string">""</span>]<span class="token punctuation">,</span>
<span class="token property">a</span><span class="token punctuation">:</span>empty[aria-label=<span class="token string">""</span>]<span class="token punctuation">,</span>
<span class="token property">a</span><span class="token punctuation">:</span>empty[aria-labelledby=<span class="token string">""</span>]<span class="token punctuation">,</span>
<span class="token property">a</span><span class="token punctuation">:</span><span class="token property">empty</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[title]<span class="token punctuation">,</span> [aria-label]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="/" class="inbl w-20" id="empty-link_code"></a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inbl w-20<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>empty-link_code<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-alt">Missing alternative for img</h2>
          <h3>Description</h3>
<p>An <code>&lt;img&gt;</code> must have an <code>[alt]</code>. Always.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.1">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.1</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">https://www.w3.org/WAI/tutorials/images/decision-tree/</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/images.html#alt">https://html.spec.whatwg.org/multipage/images.html#alt</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#non-text-content">https://www.w3.org/TR/WCAG21/#non-text-content</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H36">https://www.w3.org/WAI/WCAG21/Techniques/html/H36</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H37">https://www.w3.org/WAI/WCAG21/Techniques/html/H37</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H24">https://www.w3.org/WAI/WCAG21/Techniques/html/H24</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F65">https://www.w3.org/WAI/WCAG21/Techniques/failures/F65</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">img[alt=<span class="token string">" "</span>]<span class="token punctuation">,</span>
area[alt=<span class="token string">" "</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][alt=<span class="token string">" "</span>]<span class="token punctuation">,</span>
<span class="token property">img</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[alt]<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">area</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[alt]<span class="token punctuation">)</span><span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[alt]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><img src="/static/ffoodd.png" width="144" height="144" /><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/ffoodd.png<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-aria-label">Missing label for [role=img]</h2>
          <h3>Description</h3>
<p><code>[role=img]</code> without <code>[aria-hidden=true]</code> should either have <code>[aria-label]</code> or <code>[aria-labelledby]</code>.
If image is decorative, please use <code>[role=presentation]</code> instead.</p>
<h3>References</h3>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#img">https://www.w3.org/TR/wai-aria-1.2/#img</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#non-text-content">https://www.w3.org/TR/WCAG21/#non-text-content</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">https://www.w3.org/WAI/tutorials/images/decision-tree/</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#presentation">https://www.w3.org/TR/wai-aria-1.2/#presentation</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[role=<span class="token string">"img"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-hidden=<span class="token string">"true"</span>]<span class="token punctuation">)</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-label]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">)</span><span class="token punctuation">,</span>
svg[role=<span class="token string">"img"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-hidden=<span class="token string">"true"</span>]<span class="token punctuation">)</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-label]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" role="img">
  <rect x="400" y="100" width="400" height="200"
        fill="forestgreen" stroke="darkgreen" stroke-width="10"  />
</svg><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12cm<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4cm<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 1200 400<span class="token punctuation">"</span></span>
     <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rect</span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span>
        <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>forestgreen<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>darkgreen<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span>  <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-src">Missing source for img</h2>
          <h3>Description</h3>
<p>An <code>&lt;img&gt;</code> must have an <code>[src]</code> or an <code>[srcset]</code>, and it should be a valid one. Obviously.</p>
<h3>References</h3>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-src">https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-src</a></li>
<li><a href="https://scottjehl.github.io/picturefill/">https://scottjehl.github.io/picturefill/</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">img</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[src]<span class="token punctuation">,</span> [srcset]<span class="token punctuation">)</span><span class="token punctuation">,</span>
img[src=<span class="token string">""</span>]<span class="token punctuation">,</span>
img[src=<span class="token string">" "</span>]<span class="token punctuation">,</span>
img[src=<span class="token string">"#"</span>]<span class="token punctuation">,</span>
img[src=<span class="token string">"/"</span>]<span class="token punctuation">,</span>
img[srcset=<span class="token string">""</span>]<span class="token punctuation">,</span>
img[srcset=<span class="token string">" "</span>]<span class="token punctuation">,</span>
img[srcset=<span class="token string">"#"</span>]<span class="token punctuation">,</span>
img[srcset=<span class="token string">"/"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[src]<span class="token punctuation">,</span> [srcset]<span class="token punctuation">)</span><span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][src=<span class="token string">""</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][src=<span class="token string">" "</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][src=<span class="token string">"#"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][src=<span class="token string">"/"</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][srcset=<span class="token string">""</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][srcset=<span class="token string">" "</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">"image"</span>][srcset=<span class="token string">"#"</span>]
input[type=<span class="token string">"image"</span>][srcset=<span class="token string">"/"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><img alt="Missing src" width="144" height="144"/>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Missing src<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-for">A label with an empty [for] attribute</h2>
          <h3>Description</h3>
<p>A <code>&lt;label&gt;</code> with a <code>[for]</code> attribute should label something with an <code>[id]</code> attribute, obviously.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1.2</a></li>
<li><a href="https://github.com/DISIC/rgaa_referentiel_en/blob/44e2bee0c710e37ca49901b1e6b8fae9b553fd5d/criteria.html#L3981">https://github.com/DISIC/rgaa_referentiel_en/blob/44e2bee0c710e37ca49901b1e6b8fae9b553fd5d/criteria.html#L3981</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H44">https://www.w3.org/WAI/WCAG21/Techniques/html/H44</a></li>
<li><a href="https://www.w3.org/WAI/tutorials/forms/labels/">https://www.w3.org/WAI/tutorials/forms/labels/</a></li>
<li><a href="https://make.wordpress.org/accessibility/2017/01/16/testing-form-functionality-with-different-assistive-technology/">https://make.wordpress.org/accessibility/2017/01/16/testing-form-functionality-with-different-assistive-technology/</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#labels-or-instructions">https://www.w3.org/TR/WCAG21/#labels-or-instructions</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#headings-and-labels">https://www.w3.org/TR/WCAG21/#headings-and-labels</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">label[for=<span class="token string">""</span>]<span class="token punctuation">,</span>
label[for=<span class="token string">" "</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><label for=" ">Guess what?</label>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> <span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Guess what?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-id">Missing some kind of label</h2>
          <h3>Description</h3>
<p>How to label a field? You have a few choices: <code>[id]</code>, <code>[title]</code>, <code>[aria-label]</code> and <code>[aria-labelledby]</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#labels-or-instructions">https://www.w3.org/TR/WCAG21/#labels-or-instructions</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#headings-and-labels">https://www.w3.org/TR/WCAG21/#headings-and-labels</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H44">https://www.w3.org/WAI/WCAG21/Techniques/html/H44</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">input</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[type=<span class="token string">"button"</span>]<span class="token punctuation">,</span> [type=<span class="token string">"submit"</span>]<span class="token punctuation">,</span> [type=<span class="token string">"hidden"</span>]<span class="token punctuation">,</span> [type=<span class="token string">"reset"</span>]<span class="token punctuation">,</span> [type=<span class="token string">"image"</span>]<span class="token punctuation">,</span> [id]<span class="token punctuation">,</span> [aria-label]<span class="token punctuation">,</span> [title]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">textarea</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[id]<span class="token punctuation">,</span> [aria-label]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token property">select</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[id]<span class="token punctuation">,</span> [aria-label]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><input type="text" /><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-value">Missing a value</h2>
          <h3>Description</h3>
<p>How to label a <code>[reset]</code>, <code>[submit]</code> or <code>[button]</code> type input?
You still have a few choices: <code>[value]</code>, <code>[title]</code>, <code>[aria-label]</code> and <code>[aria-labelledby]</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H91">https://www.w3.org/WAI/WCAG21/Techniques/html/H91</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">input[type=<span class="token string">"reset"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[value]<span class="token punctuation">,</span> [title]<span class="token punctuation">,</span> [aria-label]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">)</span><span class="token punctuation">,</span>
input[type=<span class="token string">"submit"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[value]<span class="token punctuation">,</span> [title]<span class="token punctuation">,</span> [aria-label]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">)</span><span class="token punctuation">,</span>
input[type=<span class="token string">"button"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[value]<span class="token punctuation">,</span> [title]<span class="token punctuation">,</span> [aria-label]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><input type="submit" /><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-button">Empty button</h2>
          <h3>Description</h3>
<p>A <code>&lt;button&gt;</code> should either have content or an <code>[aria-label]</code>, <code>[aria-labelledby]</code> or <code>[title]</code>. Those attributes, if present, should not be empty.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H91">https://www.w3.org/WAI/WCAG21/Techniques/html/H91</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">button</span><span class="token punctuation">:</span><span class="token property">empty</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-label]<span class="token punctuation">,</span> [aria-labelledby]<span class="token punctuation">,</span> [title]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><button type="button"></button>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="empty-button-attr">Empty button attribute</h2>
          <h3>Description</h3>
<p><code>[aria-label]</code>, <code>[aria-labelledby]</code> or <code>[title]</code> on a <code>&lt;button&gt;</code> must not be empty.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H91">https://www.w3.org/WAI/WCAG21/Techniques/html/H91</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L193</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">button[title=<span class="token string">""</span>]<span class="token punctuation">,</span>
button[aria-label=<span class="token string">""</span>]<span class="token punctuation">,</span>
button[aria-labelledby=<span class="token string">""</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><button title="" type="button">Test</button>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="not-form-button">Form button</h2>
          <h3>Description</h3>
<p>A <code>&lt;button&gt;</code> has a defaut <code>[type]</code> value of <code>"submit"</code>, in order to send a <code>&lt;form&gt;</code>.</p>
<p>However outside a form, if it's intended to send a form it should mention it with one of those attributes: <code>[form]</code>, <code>[formaction]</code>, <code>[formtarget]</code>.</p>
<p>If it doesn't submit anything, it should have the <code>[type="button"]</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#the-button-element">https://html.spec.whatwg.org/multipage/forms.html#the-button-element</a></li>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L189">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L189</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">button</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[type]<span class="token punctuation">,</span> [form]<span class="token punctuation">,</span> [formaction]<span class="token punctuation">,</span> [formtarget]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><button>I just don't know what todo with myself</button>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">></span></span>I just don't know what todo with myself<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="not-submit-button">Button not submitting</h2>
          <h3>Description</h3>
<p>If a <code>&lt;button&gt;</code>'s<code>[type]</code> is either <code>"reset"</code> or <code>"button"</code>, it should not use the following attributes:</p>
<ul>
<li><code>[formmethod]</code>;</li>
<li><code>[formaction]</code>;</li>
<li><code>[formtarget]</code>;</li>
<li><code>[formenctype]</code>;</li>
<li><code>[formnovalidate]</code>.</li>
</ul>
<h3>References</h3>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#the-button-element">https://html.spec.whatwg.org/multipage/forms.html#the-button-element</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">button[type=<span class="token string">"reset"</span>][formmethod]<span class="token punctuation">,</span>
button[type=<span class="token string">"reset"</span>][formaction]<span class="token punctuation">,</span>
button[type=<span class="token string">"reset"</span>][formtarget]<span class="token punctuation">,</span>
button[type=<span class="token string">"reset"</span>][formenctype]<span class="token punctuation">,</span>
button[type=<span class="token string">"reset"</span>][formnovalidate]<span class="token punctuation">,</span>
button[type=<span class="token string">"button"</span>][formmethod]<span class="token punctuation">,</span>
button[type=<span class="token string">"button"</span>][formaction]<span class="token punctuation">,</span>
button[type=<span class="token string">"button"</span>][formtarget]<span class="token punctuation">,</span>
button[type=<span class="token string">"button"</span>][formenctype]<span class="token punctuation">,</span>
button[type=<span class="token string">"button"</span>][formnovalidate]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><button type="button" formmethod="GET">I have a method!</button>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">formmethod</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>GET<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I have a method!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="disabled-button">Disabled button</h2>
          <h3>Description</h3>
<p>A <code>&lt;button&gt;</code> styled to be disabled should be disabled <em>for real</em>.
Use <code>[disabled]</code> and <code>[readonly]</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L122">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L122</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">button[class*=<span class="token string">"disabled"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[disabled]<span class="token punctuation">,</span> [readonly]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><button class="is-disabled" type="button">To be or not to be (disabled)?</button>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>is-disabled<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>To be or not to be (disabled)?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-type">input without [type]</h2>
          <h3>Description</h3>
<p><code>&lt;input&gt;</code> needs a <code>[type]</code> in order to tell the user what kind of data is wanted.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.11">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.11</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#error-suggestion">https://www.w3.org/TR/WCAG21/#error-suggestion</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">input</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[type]<span class="token punctuation">)</span><span class="token punctuation">,</span>
input[type=<span class="token string">" "</span>]<span class="token punctuation">,</span>
input[type=<span class="token string">""</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><label for="No-type">No type</label>
<input value="Whatever you want" id="No-type"/><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>No-type<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>No type<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Whatever you want<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>No-type<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="optgroup">optgroup without label</h2>
          <h3>Description</h3>
<p><code>&lt;optgroup&gt;</code> needs a <code>[label]</code> to explain what's inside the group.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.8">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.8</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H85">https://www.w3.org/WAI/WCAG21/Techniques/html/H85</a></li>
<li><a href="https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/H85">https://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/H85</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">optgroup</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[label]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><form action="/">
    <label for="optgroup-test">Oh, hey</label>
    <select id="optgroup-test">
      <optgroup label="I'm a group">
        <option value="1">I'm an option</option>
        <option value="2">I'm another option</option>
      </optgroup>
      <optgroup>
        <option value="3">I'm an option, but from another group</option>
        <option value="4">I'm another option, still from another group</option>
     </optgroup>
   </select>
</form>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>optgroup-test<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Oh, hey<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>optgroup-test<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I'm a group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm an option<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm another option<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>optgroup</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>optgroup</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm an option, but from another group<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm another option, still from another group<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>optgroup</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-title">iframe without [title]</h2>
          <h3>Description</h3>
<p><code>&lt;iframe&gt;</code> needs a <code>[title]</code> in order to tell the user what to expect inside the iframe.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#2.1">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#2.1</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H64">https://www.w3.org/WAI/WCAG21/Techniques/html/H64</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">iframe</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[title]<span class="token punctuation">)</span><span class="token punctuation">,</span>
iframe[title=<span class="token string">" "</span>]<span class="token punctuation">,</span>
iframe[title=<span class="token string">""</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><iframe srcdoc="<!DOCTYPE html><title>Missing [title]</title>"></iframe><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>iframe</span> <span class="token attr-name">srcdoc</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&lt;!DOCTYPE html>&lt;title>Missing [title]&lt;/title><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>iframe</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-action">form missing an [action]</h2>
          <h3>Description</h3>
<p><code>&lt;form&gt;</code> should do something, isnt'it? Well, <code>[action]</code> is meant to define what.</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L214">https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css#L214</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">form</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[action]<span class="token punctuation">)</span><span class="token punctuation">,</span>
form[action=<span class="token string">" "</span>]<span class="token punctuation">,</span>
form[action=<span class="token string">""</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><form>
  <label for="input">Guess what do we do with your datas?</label>
  <input id="input" type="text" />

  <input type="submit" value="No idea, huh?"/>
</form>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Guess what do we do with your datas?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>No idea, huh?<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-lang">No valid language defined</h2>
          <h3>Description</h3>
<p><code>&lt;html&gt;</code> must indicate to User Agents the human language used in the document.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.3">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.3</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/glossaire/#langue-par-defaut">https://accessibilite.numerique.gouv.fr/methode/glossaire/#langue-par-defaut</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.4">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.4</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#language-of-page">https://www.w3.org/TR/WCAG21/#language-of-page</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H57">https://www.w3.org/WAI/WCAG21/Techniques/html/H57</a></li>
<li><a href="https://html.spec.whatwg.org/#attr-lang">https://html.spec.whatwg.org/#attr-lang</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/language-of-page">https://www.w3.org/WAI/WCAG21/Understanding/language-of-page</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html">https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html</a></li>
<li><a href="https://www.matuzo.at/blog/lang-attribute/">https://www.matuzo.at/blog/lang-attribute/</a></li>
<li><a href="https://codepen.io/matuzo/project/editor/ZyrVee">https://codepen.io/matuzo/project/editor/ZyrVee</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">html</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[lang]<span class="token punctuation">)</span><span class="token punctuation">,</span>
html[lang*=<span class="token string">" "</span>]<span class="token punctuation">,</span>
html[lang=<span class="token string">""</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><iframe title="No language defined example" srcdoc="<!DOCTYPE html>
  <html>
    <head>
      <meta charset='utf-8'/>
      <title>Je ne parle pas Français</title>
      <style>html{font:.75rem sans-serif}</style>
      <link rel='stylesheet' type='text/css' href='https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css'>
    </head>
    <body>
      <ul>
        <li>Speak French?</li>
        <li>Habla usted francés?</li>
        <li>Sprechen Sie Französisch?</li>
    </ul>">
</iframe>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>iframe</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>No language defined example<span class="token punctuation">"</span></span> <span class="token attr-name">srcdoc</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&lt;!DOCTYPE html>
  &lt;html>
    &lt;head>
      &lt;meta charset='utf-8'/>
      &lt;title>Je ne parle pas Français&lt;/title>
      &lt;style>html{font:.75rem sans-serif}&lt;/style>
      &lt;link rel='stylesheet' type='text/css' href='https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css'>
    &lt;/head>
    &lt;body>
      &lt;ul>
        &lt;li>Speak French?&lt;/li>
        &lt;li>Habla usted francés?&lt;/li>
        &lt;li>Sprechen Sie Französisch?&lt;/li>
    &lt;/ul><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>iframe</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="table-for-layout">table used for layout</h2>
          <h3>Description</h3>
<p><code>&lt;table&gt;</code> may be used for layout if a [role="presentation"] is added.
However, semantics tags and attributes aiming to organize datas mustn't be used. Here's a list:</p>
<ul>
<li><code>&lt;th&gt;</code>;</li>
<li><code>&lt;thead&gt;</code>;</li>
<li><code>&lt;tfoot&gt;</code>;</li>
<li><code>&lt;caption&gt;</code>;</li>
<li><code>[axis]</code>;</li>
<li><code>[scope]</code>;</li>
<li><code>[headers]</code>;</li>
<li><code>[colgroup]</code>.</li>
</ul>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.8">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#5.8</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F46">https://www.w3.org/WAI/WCAG21/Techniques/failures/F46</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F49">https://www.w3.org/WAI/WCAG21/Techniques/failures/F49</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">table[role=<span class="token string">"presentation"</span>] th<span class="token punctuation">,</span>
table[role=<span class="token string">"presentation"</span>] thead<span class="token punctuation">,</span>
table[role=<span class="token string">"presentation"</span>] tfoot<span class="token punctuation">,</span>
table[role=<span class="token string">"presentation"</span>] caption<span class="token punctuation">,</span>
table[role=<span class="token string">"presentation"</span>] colgroup<span class="token punctuation">,</span>
table[role=<span class="token string">"presentation"</span>] [axis]<span class="token punctuation">,</span>
table[role=<span class="token string">"presentation"</span>] [scope]<span class="token punctuation">,</span>
table[role=<span class="token string">"presentation"</span>] [headers]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><table role="presentation">
  <caption>I do not mean anything!</caption>
  <tbody>
    <tr>
      <td colspan="2">It works</td>
    </tr>
  </tbody>
</table>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>presentation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>caption</span><span class="token punctuation">></span></span>I do not mean anything!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>caption</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>It works<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="dimensions">[width] &amp; [height] attributes</h2>
          <h3>Description</h3>
<p><code>[width]</code> and <code>[height]</code> are presentation informations.
Therefore it shouldn't be used in markup, except for <code>&lt;img&gt;</code>. Use CSS instead.</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#info-and-relationships">https://www.w3.org/TR/WCAG21/#info-and-relationships</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#meaningful-sequence">https://www.w3.org/TR/WCAG21/#meaningful-sequence</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>img<span class="token punctuation">,</span> object<span class="token punctuation">,</span> embed<span class="token punctuation">,</span> svg<span class="token punctuation">,</span> canvas<span class="token punctuation">)</span>[width]<span class="token punctuation">,</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>img<span class="token punctuation">,</span> object<span class="token punctuation">,</span> embed<span class="token punctuation">,</span> svg<span class="token punctuation">,</span> canvas<span class="token punctuation">)</span>[height]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><p width="20">Damned! I feel sooo strait :(</p>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Damned! I feel sooo strait :(<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="js-events">Javascript events attributes</h2>
          <h3>Description</h3>
<p>Javascript event attributes (such as <code>[onmouseover]</code>) should not be used.
Prefer either CSS pseudo-classes (<code>:hover</code>, <code>:focus</code>, <code>:active</code>, etc.) or JS event listeners.</p>
<h3>References</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[onafterprint]<span class="token punctuation">,</span> [onbeforeprint]<span class="token punctuation">,</span> [onbeforeunload]<span class="token punctuation">,</span>
[onerror]<span class="token punctuation">,</span> [onhaschange]<span class="token punctuation">,</span> [onload]<span class="token punctuation">,</span> [onmessage]<span class="token punctuation">,</span>
[onoffline]<span class="token punctuation">,</span> [ononline]<span class="token punctuation">,</span> [onpagehide]<span class="token punctuation">,</span> [onpageshow]<span class="token punctuation">,</span>
[onpopstate]<span class="token punctuation">,</span> [onredo]<span class="token punctuation">,</span> [onresize]<span class="token punctuation">,</span> [onstorage]<span class="token punctuation">,</span>
[onundo]<span class="token punctuation">,</span> [onunload]<span class="token punctuation">,</span>
[onblur]<span class="token punctuation">,</span> [onchage]<span class="token punctuation">,</span> [oncontextmenu]<span class="token punctuation">,</span> [onfocus]<span class="token punctuation">,</span>
[onformchange]<span class="token punctuation">,</span> [onforminput]<span class="token punctuation">,</span> [oninput]<span class="token punctuation">,</span> [oninvalid]<span class="token punctuation">,</span>
[onreset]<span class="token punctuation">,</span> [onselect]<span class="token punctuation">,</span> [onsubmit]<span class="token punctuation">,</span>
[onkeydown]<span class="token punctuation">,</span> [onkeypress]<span class="token punctuation">,</span> [onkeyup]<span class="token punctuation">,</span>
[onclick]<span class="token punctuation">,</span> [ondblclick]<span class="token punctuation">,</span> [ondrag]<span class="token punctuation">,</span> [ondragend]<span class="token punctuation">,</span>
[ondragenter]<span class="token punctuation">,</span> [ondragleave]<span class="token punctuation">,</span> [ondragover]<span class="token punctuation">,</span>
[ondragstart]<span class="token punctuation">,</span> [ondrop]<span class="token punctuation">,</span> [onmousedown]<span class="token punctuation">,</span> [onmousemove]<span class="token punctuation">,</span>
[onmouseout]<span class="token punctuation">,</span> [onmouseover]<span class="token punctuation">,</span> [onmouseup]<span class="token punctuation">,</span> [onmousewheel]<span class="token punctuation">,</span>
[onscroll]<span class="token punctuation">,</span>
[onabort]<span class="token punctuation">,</span> [oncanplay]<span class="token punctuation">,</span> [oncanplaythrough]<span class="token punctuation">,</span>
[ondurationchange]<span class="token punctuation">,</span> [onemptied]<span class="token punctuation">,</span> [onended]<span class="token punctuation">,</span> [onerror]<span class="token punctuation">,</span>
[onloadeddata]<span class="token punctuation">,</span> [onloadedmetadata]<span class="token punctuation">,</span> [onloadstart]<span class="token punctuation">,</span>
[onpause]<span class="token punctuation">,</span> [onplay]<span class="token punctuation">,</span> [onplaying]<span class="token punctuation">,</span> [onprogress]<span class="token punctuation">,</span>
[onratechange]<span class="token punctuation">,</span> [onreadystatechange]<span class="token punctuation">,</span> [onseeked]<span class="token punctuation">,</span>
[onseeking]<span class="token punctuation">,</span> [onstalled]<span class="token punctuation">,</span> [onsuspend]<span class="token punctuation">,</span> [ontimeupdate]<span class="token punctuation">,</span>
[onvolumechange]<span class="token punctuation">,</span> [onwaiting]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><span onclick="alert('You clicked!');">Click click click</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'You clicked!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Click click click<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="namespace">Namespaces</h2>
          <h3>Description</h3>
<p>Did you know that some characters should be avoided as first characters in class names and identifiers?
Yep. Digits, two hyphens, or hyphen followed by a digit.</p>
<h3>References</h3>
<ul>
<li><a href="https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#w3cselgrammar">https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#w3cselgrammar</a></li>
<li><a href="https://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/">https://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/</a></li>
<li><a href="https://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/tests/css3-modsel-175a.html">https://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/tests/css3-modsel-175a.html</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[id^=<span class="token string">"1"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"2"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"3"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"4"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"5"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"6"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"7"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"8"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"9"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"0"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"--"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"-1"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"-2"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"-3"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"-4"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"-5"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"-6"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"-7"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"-8"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"-9"</span>]<span class="token punctuation">,</span>
[id^=<span class="token string">"-0"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"1"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"2"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"3"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"4"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"5"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"6"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"7"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"8"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"9"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"0"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"--"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"-1"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"-2"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"-3"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"-4"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"-5"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"-6"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"-7"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"-8"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"-9"</span>]<span class="token punctuation">,</span>
[class^=<span class="token string">"-0"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><div id="2">Hello! My ID is 2.</div>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello! My ID is 2.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="no-page-title">Empty title tag</h2>
          <h3>Description</h3>
<p>The <code>&lt;title&gt;</code> tag is the first thing read aloud by screen readers — to announce the page&hellip; title — and also the first thing displayed on search engines' results pages.</p>
<p>We could use the <code>:blank</code> pseudo-class, but at this time its support is very poor. We could also use the <code>:-moz-only-whitespace</code> pseudo-class, but support is limited to Firefox and thus could invalidate our selectors stack…</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.5">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.5</a></li>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/glossaire/#titre-de-page">https://accessibilite.numerique.gouv.fr/methode/glossaire/#titre-de-page</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-title-element">https://html.spec.whatwg.org/multipage/semantics.html#the-title-element</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#page-titled">https://www.w3.org/TR/WCAG21/#page-titled</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/quickref/#page-titled">https://www.w3.org/WAI/WCAG21/quickref/#page-titled</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html">https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G88">https://www.w3.org/WAI/WCAG21/Techniques/general/G88</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G127">https://www.w3.org/WAI/WCAG21/Techniques/general/G127</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H25">https://www.w3.org/WAI/WCAG21/Techniques/html/H25</a></li>
<li><a href="https://drafts.csswg.org/selectors-4/#the-blank-pseudo">https://drafts.csswg.org/selectors-4/#the-blank-pseudo</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace">https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace</a></li>
<li><a href="https://css-tricks.com/almanac/selectors/b/blank/">https://css-tricks.com/almanac/selectors/b/blank/</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">title</span><span class="token punctuation">:</span>empty
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><title></title>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="unaccessible-viewport">Unaccessible viewport attribute</h2>
          <h3>Description</h3>
<p>User should be able to zoom in or out the page to improve readability and comfort; this is usually allowed by the viewport <code>&lt;meta&gt;</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://bitsofco.de/linting-html-using-css/">https://bitsofco.de/linting-html-using-css/</a></li>
<li><a href="https://dequeuniversity.com/rules/axe/2.1/meta-viewport">https://dequeuniversity.com/rules/axe/2.1/meta-viewport</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#resize-text">https://www.w3.org/TR/WCAG21/#resize-text</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html">https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html</a></li>
<li><a href="https://www.accede-web.com/notices/html-et-css/bonnes-pratiques/ne-pas-brider-le-zoom-avec-la-propriete-user-scalable/">https://www.accede-web.com/notices/html-et-css/bonnes-pratiques/ne-pas-brider-le-zoom-avec-la-propriete-user-scalable/</a></li>
<li><a href="https://adrianroselli.com/2015/10/dont-disable-zoom.html">https://adrianroselli.com/2015/10/dont-disable-zoom.html</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">meta[name=<span class="token string">"viewport"</span>][content*=<span class="token string">"maximum-scale"</span>]<span class="token punctuation">,</span>
meta[name=<span class="token string">"viewport"</span>][content*=<span class="token string">"minimum-scale"</span>]<span class="token punctuation">,</span>
meta[name=<span class="token string">"viewport"</span>][content*=<span class="token string">"user-scalable=no"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><iframe title="Wrong viewport instruction example" srcdoc="<!DOCTYPE html>
  <html lang='en'>
    <head>
      <meta charset='utf-8'/>
      <title>Wrong viewport instruction</title>
      <meta name='viewport' content='user-scalable=no'/>
      <style>html{font:.75rem sans-serif}</style>
      <link rel='stylesheet' type='text/css' href='https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css'>
    </head>
    <body>
      <h1>Wrong <code>viewport</code> instruction</h1>">
</iframe>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>iframe</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Wrong viewport instruction example<span class="token punctuation">"</span></span> <span class="token attr-name">srcdoc</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&lt;!DOCTYPE html>
  &lt;html lang='en'>
    &lt;head>
      &lt;meta charset='utf-8'/>
      &lt;title>Wrong viewport instruction&lt;/title>
      &lt;meta name='viewport' content='user-scalable=no'/>
      &lt;style>html{font:.75rem sans-serif}&lt;/style>
      &lt;link rel='stylesheet' type='text/css' href='https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css'>
    &lt;/head>
    &lt;body>
      &lt;h1>Wrong &lt;code>viewport&lt;/code> instruction&lt;/h1><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>iframe</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="incorrect-charset">Incorrect charset</h2>
          <h3>Description</h3>
<p>Using <code>utf-8</code> character encoding is recommended by the W3C itself:</p>
<blockquote>
  <p>supports many languages and can accommodate pages and forms in any mixture of those languages.</p>
</blockquote>
<p>Moreover it avoids some security issues exploiting some other charsets…</p>
<h3>References</h3>
<ul>
<li><a href="https://bitsofco.de/linting-html-using-css/#incorrectcharacterset">https://bitsofco.de/linting-html-using-css/#incorrectcharacterset</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-charset">https://html.spec.whatwg.org/multipage/semantics.html#attr-meta-charset</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta</a></li>
<li><a href="https://validator.w3.org/docs/help.html#faq-charset">https://validator.w3.org/docs/help.html#faq-charset</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#readable">https://www.w3.org/TR/WCAG21/#readable</a></li>
<li><a href="https://validator.w3.org/i18n-checker/">https://validator.w3.org/i18n-checker/</a></li>
<li><a href="https://www.w3.org/International/tutorials/tutorial-char-enc/">https://www.w3.org/International/tutorials/tutorial-char-enc/</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">meta[charset]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[charset=<span class="token string">"utf-8"</span>]<span class="token punctuation">,</span> [charset=<span class="token string">"UTF-8"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><meta charset="Windows-1252"/><link>†</link>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Windows-1252<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>link</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="late-charset">Charset should come first</h2>
          <h3>Description</h3>
<p>As explained on the Mozilla Developer Network:</p>
<blockquote>
  <p>The <code>&lt;meta&gt;</code> element declaring the encoding must be inside the <code>&lt;head&gt;</code> element
  and <strong>within the first 1024 bytes</strong> of the HTML, as some browsers only look at
  those bytes before choosing an encoding.</p>
</blockquote>
<p>It's also meant to prevent an old security exploit using UTF-7. Declaring the charset
before the <code>&lt;title&gt;</code> tag is the simplest way to cover it.</p>
<h3>References</h3>
<ul>
<li><a href="https://bitsofco.de/linting-html-using-css/#incorrectcharacterset">https://bitsofco.de/linting-html-using-css/#incorrectcharacterset</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/semantics.html#charset">https://html.spec.whatwg.org/multipage/semantics.html#charset</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token property">head</span> <span class="token punctuation">:</span><span class="token property">first-child</span><span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[charset]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><iframe title="Late charset example" srcdoc="<!DOCTYPE html>
  <html lang=en>
    <head>
      <title>Oups !</title>
      <style>html{font:.75rem sans-serif}</style>
      <link rel=stylesheet type=text/css href=https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css>
    </head>
    <body>
      <h1>How am I encoded, buddy?</h1>">
</iframe>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>iframe</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Late charset example<span class="token punctuation">"</span></span> <span class="token attr-name">srcdoc</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>&lt;!DOCTYPE html>
  &lt;html lang=en>
    &lt;head>
      &lt;title>Oups !&lt;/title>
      &lt;style>html{font:.75rem sans-serif}&lt;/style>
      &lt;link rel=stylesheet type=text/css href=https://ffoodd.github.io/a11y.css/css/a11y-en_errors-only.css>
    &lt;/head>
    &lt;body>
      &lt;h1>How am I encoded, buddy?&lt;/h1><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>iframe</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="invalid-dir">Invalid [dir] attribute</h2>
          <h3>Description</h3>
<p>The <code>[dir]</code> attribute — used to specify the element’s text directionality — only accepts three values: <code>rtl</code>, <code>ltr</code> and <code>auto</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/karlgroves/diagnostic.css/blob/39ede15ff46bd59af9f8f30efb04cbb45b6c1ba5/diagnostic.css#L113">https://github.com/karlgroves/diagnostic.css/blob/39ede15ff46bd59af9f8f30efb04cbb45b6c1ba5/diagnostic.css#L113</a></li>
<li><a href="https://www.w3.org/International/questions/qa-html-dir">https://www.w3.org/International/questions/qa-html-dir</a></li>
<li><a href="https://www.w3.org/International/articles/inline-bidi-markup/#dirattribute">https://www.w3.org/International/articles/inline-bidi-markup/#dirattribute</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute">https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[dir]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[dir=<span class="token string">"rtl"</span>]<span class="token punctuation">,</span> [dir=<span class="token string">"ltr"</span>]<span class="token punctuation">,</span> [dir=<span class="token string">"auto"</span>]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><p dir="wtf">Well, I'm kinda disoriented…</p>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wtf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Well, I'm kinda disoriented…<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="accesskey">[accesskey] is a bad idea</h2>
          <h3>Description</h3>
<p>The <code>[accesskey]</code> attribute is meant to implement site specific keyboard shortcuts.
This is usually a bad idea since keys might be already used by either the operating system,
the browser, browser extension and even user's settings…</p>
<p>This is opinionated: in a perfect world, <code>[accesskey]</code> could be used wisely. Yup. Could be.</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/karlgroves/diagnostic.css/blob/39ede15ff46bd59af9f8f30efb04cbb45b6c1ba5/diagnostic.css#L159">https://github.com/karlgroves/diagnostic.css/blob/39ede15ff46bd59af9f8f30efb04cbb45b6c1ba5/diagnostic.css#L159</a></li>
<li><a href="https://jkorpela.fi/forms/accesskey.html">https://jkorpela.fi/forms/accesskey.html</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/interaction.html#the-accesskey-attribute">https://html.spec.whatwg.org/multipage/interaction.html#the-accesskey-attribute</a></li>
<li><a href="https://john.foliot.ca/more-reasons-why-we-dont-use-accesskeys/">https://john.foliot.ca/more-reasons-why-we-dont-use-accesskeys/</a></li>
<li><a href="https://www.alsacreations.com/article/lire/568-Accesskey-le-grand-echec-de-l-accessibilite-du-Web.html">https://www.alsacreations.com/article/lire/568-Accesskey-le-grand-echec-de-l-accessibilite-du-Web.html</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[accesskey]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a id="key" name="key" accesskey="1">Skip to this link using <kbd>1</kbd></a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>key<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>key<span class="token punctuation">"</span></span> <span class="token attr-name">accesskey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Skip to this link using <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>kbd</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="inputs-group">Grouping inputs</h2>
          <h3>Description</h3>
<p>Inputs with a type of <code>radio</code> or <code>checkbox</code> are usually grouped. The <code>[name]</code> attribute is meant to programmatically associate them,
thus is needed.</p>
<h3>References</h3>
<ul>
<li><a href="https://www.w3.org/WAI/tutorials/forms/grouping/">https://www.w3.org/WAI/tutorials/forms/grouping/</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#checkbox-state-typecheckbox">https://html.spec.whatwg.org/multipage/forms.html#checkbox-state-typecheckbox</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#radio-button-state-typeradio">https://html.spec.whatwg.org/multipage/forms.html#radio-button-state-typeradio</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#element-attrdef-formelements-name">https://html.spec.whatwg.org/multipage/forms.html#element-attrdef-formelements-name</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H71">https://www.w3.org/WAI/WCAG21/Techniques/html/H71</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[type=<span class="token string">"radio"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[name]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[type=<span class="token string">"checkbox"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span><span class="token punctuation">:</span>only-of-type<span class="token punctuation">,</span> [name]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><form action="/">
  <fieldset>
    <legend>Options</legend>
    <p>
      <label for="option-1">Option N<sup>o</sup>1</label>
      <input type="radio" id="option-1"><span>†</span>
    </p>
    <p>
      <label for="option-2">Option N<sup>o</sup>2</label>
      <input type="radio" id="option-2" name="options">
    </p>
  </fieldset>
</form>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>legend</span><span class="token punctuation">></span></span>Options<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>legend</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option N<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sup</span><span class="token punctuation">></span></span>o<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sup</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option N<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sup</span><span class="token punctuation">></span></span>o<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sup</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>options<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fieldset</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="radio-group">[radio] outside a fieldset</h2>
          <h3>Description</h3>
<p>Inputs with a type of <code>radio</code> should be grouped by a parent <code>&lt;fieldset&gt;</code>, described by its <code>&lt;legend&gt;</code>.</p>
<p>Please note that WCAG doesn't actually require this but strongly recommends it:
"where the individual label associated with each particular control provides a sufficient description,
the use of the fieldset and legend elements is not required."</p>
<p>This test could be a warning…</p>
<h3>References</h3>
<ul>
<li><a href="https://www.w3.org/WAI/tutorials/forms/grouping/#radio-buttons">https://www.w3.org/WAI/tutorials/forms/grouping/#radio-buttons</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#radio-button-state-typeradio">https://html.spec.whatwg.org/multipage/forms.html#radio-button-state-typeradio</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#element-attrdef-formelements-name">https://html.spec.whatwg.org/multipage/forms.html#element-attrdef-formelements-name</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H71">https://www.w3.org/WAI/WCAG21/Techniques/html/H71</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H44">https://www.w3.org/WAI/WCAG21/Techniques/html/H44</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[type=<span class="token string">"radio"</span>]
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><form action="/">
  <p>
    <label for="option-1">Option N<sup>o</sup>1</label>
    <input type="radio" id="option-1" name="options"><span>†</span>
  </p>

  <br>

  <fieldset>
    <legend>Trying within a fieldset, shouldn't match</legend>
    <p>
      <label for="option-2">Option N<sup>o</sup>2</label>
      <input type="radio" id="option-2" name="options"><span>†</span>
    </p>
  </fieldset>
</form>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option N<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sup</span><span class="token punctuation">></span></span>o<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sup</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>options<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>legend</span><span class="token punctuation">></span></span>Trying within a fieldset, shouldn't match<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>legend</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option N<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sup</span><span class="token punctuation">></span></span>o<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sup</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>options<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fieldset</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="role-slider">[role=slider] missing attributes</h2>
          <h3>Description</h3>
<p><code>[role="slider"]</code> requires a few attributes:</p>
<ul>
<li><code>[aria-valuemin]</code></li>
<li><code>[aria-valuemax]</code></li>
<li><code>[aria-valuenow]</code></li>
</ul>
<p>Also <code>[aria-valuetext]</code> is welcome, even though it's not required by ARIA specification.</p>
<h3>References</h3>
<ul>
<li><a href="https://github.com/imbrianj/debugCSS/blob/master/debugCSS.css#L378">https://github.com/imbrianj/debugCSS/blob/master/debugCSS.css#L378</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#slider">https://www.w3.org/TR/wai-aria-1.2/#slider</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow">https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin">https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax">https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax</a></li>
<li><a href="https://www.tpgi.com/aria-slider-part-1/">https://www.tpgi.com/aria-slider-part-1/</a></li>
<li><a href="https://www.tpgi.com/aria-slider-part-2/">https://www.tpgi.com/aria-slider-part-2/</a></li>
<li><a href="https://www.tpgi.com/aria-slider-part-3/">https://www.tpgi.com/aria-slider-part-3/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[role=<span class="token string">"slider"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-valuemin]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[role=<span class="token string">"slider"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-valuemax]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[role=<span class="token string">"slider"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-valuenow]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><label for="slider">Slider</label>
<input id="slider" role="slider" type="range" /><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Slider<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slider<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slider<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="role-spinbutton">[role=spinbutton] missing attributes</h2>
          <h3>Description</h3>
<p><code>[role="spinbutton"]</code> requires a few attributes:</p>
<ul>
<li><code>[aria-valuemin]</code></li>
<li><code>[aria-valuemax]</code></li>
<li><code>[aria-valuenow]</code></li>
</ul>
<h3>References</h3>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#spinbutton">https://www.w3.org/TR/wai-aria-1.2/#spinbutton</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow">https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin">https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax">https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[role=<span class="token string">"spinbutton"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-valuemin]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[role=<span class="token string">"spinbutton"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-valuemax]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[role=<span class="token string">"spinbutton"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-valuenow]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><label for="spinbutton">Spinbutton</label>
<input id="spinbutton" role="spinbutton" type="range" /><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spinbutton<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Spinbutton<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spinbutton<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>spinbutton<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="role-checkbox">[role=checkbox] missing state</h2>
          <h3>Description</h3>
<p><code>[role="checkbox"]</code> requires an attribute: <code>[aria-checked]</code></p>
<h3>References</h3>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#checkbox">https://www.w3.org/TR/wai-aria-1.2/#checkbox</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-checked">https://www.w3.org/TR/wai-aria-1.2/#aria-checked</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[role=<span class="token string">"checkbox"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-checked]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><img src="/static/ffoodd.png" alt="Checkbox" role="checkbox" width="36" height="36"/><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/static/ffoodd.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>36<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>36<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="role-combobox">[role=combobox] missing [state]</h2>
          <h3>Description</h3>
<p><code>[aria-expanded]</code> is required on <code>[role="combobox"]</code>.</p>
<h3>References</h3>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#combobox">https://www.w3.org/TR/wai-aria-1.2/#combobox</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-expanded">https://www.w3.org/TR/wai-aria-1.2/#aria-expanded</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[role=<span class="token string">"combobox"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-expanded]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><input type="text" aria-label="Combobox" role="combobox" id="combobox"><span>†</span>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Combobox<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>combobox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>combobox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>†<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="role-scrollbar">[role=scrollbar] required properties</h2>
          <h3>Description</h3>
<p>Some properties are required to comply the <code>[role="scrollbar"]</code> pattern:</p>
<ul>
<li><code>[aria-controls]</code></li>
<li><code>[aria-valuemin]</code></li>
<li><code>[aria-valuemax]</code></li>
<li><code>[aria-valuenow]</code></li>
<li><code>[aria-orientation]</code></li>
</ul>
<h3>References</h3>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#scrollbar">https://www.w3.org/TR/wai-aria-1.2/#scrollbar</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-controls">https://www.w3.org/TR/wai-aria-1.2/#aria-controls</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin">https://www.w3.org/TR/wai-aria-1.2/#aria-valuemin</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax">https://www.w3.org/TR/wai-aria-1.2/#aria-valuemax</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow">https://www.w3.org/TR/wai-aria-1.2/#aria-valuenow</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-orientation">https://www.w3.org/TR/wai-aria-1.2/#aria-orientation</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">[role=<span class="token string">"scrollbar"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-controls]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[role=<span class="token string">"scrollbar"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-valuemin]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[role=<span class="token string">"scrollbar"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-valuemax]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[role=<span class="token string">"scrollbar"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-valuenow]<span class="token punctuation">)</span><span class="token punctuation">,</span>
[role=<span class="token string">"scrollbar"</span>]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[aria-orientation]<span class="token punctuation">)</span>
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><div role="scrollbar">↓</div>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scrollbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>↓<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>
        <article>
          <h2 id="nested-interactive">Nested interactive elements</h2>
          <h3>Description</h3>
<p>An interactive element should not be contained in another interactive element (e.g. <code>&lt;a&gt;</code> in <code>&lt;button&gt;</code>).</p>
<h3>References</h3>
<ul>
<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2">https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.2</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#parsing">https://www.w3.org/TR/WCAG21/#parsing</a></li>
<li><a href="https://www.w3.org/TR/WCAG21/#name-role-value">https://www.w3.org/TR/WCAG21/#name-role-value</a></li>
<li><a href="https://www.w3.org/TR/xhtml1/#prohibitions">https://www.w3.org/TR/xhtml1/#prohibitions</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2">https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#the-form-element">https://html.spec.whatwg.org/multipage/forms.html#the-form-element</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#the-progress-element">https://html.spec.whatwg.org/multipage/forms.html#the-progress-element</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#the-meter-element">https://html.spec.whatwg.org/multipage/forms.html#the-meter-element</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#the-button-element">https://html.spec.whatwg.org/multipage/forms.html#the-button-element</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element">https://html.spec.whatwg.org/multipage/forms.html#the-label-element</a></li>
</ul>
<h3>Selector</h3>
<div class="pre"><pre><code class="css language-css" data-language="CSS">a a[href]<span class="token punctuation">,</span>
button a[href]<span class="token punctuation">,</span>
a audio[controls]<span class="token punctuation">,</span>
button audio[controls]<span class="token punctuation">,</span>
a video[controls]<span class="token punctuation">,</span>
button video[controls]<span class="token punctuation">,</span>
a button<span class="token punctuation">,</span>
button button<span class="token punctuation">,</span>
a details<span class="token punctuation">,</span>
button details<span class="token punctuation">,</span>
a embed<span class="token punctuation">,</span>
button embed<span class="token punctuation">,</span>
a iframe<span class="token punctuation">,</span>
button iframe<span class="token punctuation">,</span>
a img[usemap]<span class="token punctuation">,</span>
button img[usemap]<span class="token punctuation">,</span>
a label<span class="token punctuation">,</span>
button label<span class="token punctuation">,</span>
a select<span class="token punctuation">,</span>
button select<span class="token punctuation">,</span>
a textarea<span class="token punctuation">,</span>
button textarea<span class="token punctuation">,</span>
a input[type]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[hidden]<span class="token punctuation">)</span><span class="token punctuation">,</span>
button input[type]<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>[hidden]<span class="token punctuation">)</span><span class="token punctuation">,</span>
form form<span class="token punctuation">,</span>
label label<span class="token punctuation">,</span>
meter meter<span class="token punctuation">,</span>
progress progress
</code></pre></div>
<h3>Test</h3>
<div class="pre"><div><a href="https://www.ffoodd.fr">
  <button type=button">Oh wait, what should I trigger?</button>
</a>
</div><pre><code class="html language-html" data-language="Example"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.ffoodd.fr<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  &lt;button type=button">Oh wait, what should I trigger?<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre></div>
        </article>

      
    </main>
    <footer role="contentinfo">
  <p class="builtWith box">
      Built with
      <a href="https://www.11ty.dev/">
        Eleventy
        <span class="sr-only">&nbsp;(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>-
      </a>
      and supported by
      <a href="https://www.jetbrains.com/?from=a11y.css">
        JetBrains
        <span class="sr-only">&nbsp;(external link)</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true" width="10" height="10">
  <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
  <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
</svg>
      </a>
    </p>
    <div>
      <p>® 2014 —&nbsp;2023 <strong>Gaël Poupard</strong></p>
      <p>This project is distributed under license <a href="https://opensource.org/license/mit/">MIT</a> and <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. <a href="#skip-links">Back to top</a></p>
    </div>
</footer>

    <script src="./static/docs.js?v=1690620346338"></script>
  </body>
</html>
